<template>
	<div class="">
		<el-descriptions title="" :column="2">
			<el-descriptions-item label="订单编号">{{detailData.orderNo||''}}</el-descriptions-item>
			<el-descriptions-item label="订单状态">
				<span v-if="detailData.status==1">待支付</span>
				<span v-else-if="detailData.status==4">已完成</span>
				<span v-else-if="detailData.status==7">已失效</span>
			</el-descriptions-item>
			<el-descriptions-item label="商品价格">{{detailData.totalAmount||''}}</el-descriptions-item>
			<el-descriptions-item label="下单(支付)时间">{{detailData.paymentTime||''}}</el-descriptions-item>
			<el-descriptions-item
				label="支付方式"><span>{{detailData.payType==1?'支付宝':detailData.payType==2?'微信':detailData.payType==3?'兑换码':''}}</span></el-descriptions-item>
			<el-descriptions-item label="兑换码">{{detailData.exchangeCode||''}}</el-descriptions-item>
			<el-descriptions-item label="优惠金额">{{Number(detailData.totalAmount-detailData.payAmount)}}</el-descriptions-item>
			<el-descriptions-item label="用户电话">{{detailData.userMobile||''}}</el-descriptions-item>
			<el-descriptions-item label="下单用户">{{detailData.userName||''}}</el-descriptions-item>
			<el-descriptions-item label="推荐人信息">{{detailData.users?detailData.users.name:''}}</el-descriptions-item>
			<el-descriptions-item label="结算佣金">{{detailData.reward?detailData.reward.toFixed(2):''}}</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script>
	export default {
		props: ['id'],
		data() {
			return {
				detailData: {}
			}
		},
		mounted() {
			if (this.id) {
				this.getData()
			}
		},
		methods: {
			async getData() {
				const res = await this.$get('/admin/order/getOrderDetail', {
					id: this.id || '',
					type: 2
				})
				this.detailData = res.data
			},
			goReturn() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped="scoped">
	h1,
	h3,
	h4 {
		font-weight: 600;
	}

	h1 {
		margin-left: 20px;
	}

	.newsBox {
		width: 98%;
		margin-left: 20px;
		margin-top: 20px;
	}

	.contentBox {
		width: 98%;
		margin-left: 32px;
		margin-top: 20px;
	}

	.box3 {
		padding: 0 20px;
	}

	.el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		text-align: right !important;
	}
</style>